<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Glossy Shadow Button - 带光泽阴影按钮</title>
<style type="text/css">
	.w {
		width: 900px;
		margin: 0 auto;
		margin-bottom: 40px;
	}
	
	.blues {
		color: #fff;
		width: 190px;
		height: 35px;
		cursor: pointer;
		font-family: Arial, Tahoma, sans-serif;
		font-size: 1.0em;
		font-weight: bold;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		border-width: 1px;
		border-color: #0053a6 #0053a6 #000;
		background-color: #6891e7;
		background-image: -moz-linear-gradient(top,#4495e7 0, #0053a6 100%);
		background-image: -ms-linear-gradient(top,#4495e7 0, #0053a6 100%);
		background-image: -o-linear-gradient(top,#4495e7 0, #0053a6 100%);
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4495e7),color-stop(100%, #0053a6));
		background-image: -webkit-linear-gradient(top,#4495e7 0,#0053a6 100%);
		background-image: linear-gradient(to bottom,#4495e7 0,#0053a6 100%);
		text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
		-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
		-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
		-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
		box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
		filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4495e7,EndColorStr=#0053a6);
	}
	
	.blues:hover {
		border-color: #002d59 #002d59 #000;
		-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
		-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
		-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
		box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, .25);
		filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#3a8cdf ,EndColorStr=#0053a6);
		background-image: -moz-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
		background-image: -ms-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
		background-image: -o-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3a8cdf),color-stop(100%,#0053a6));
		background-image: -webkit-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
		background-image: linear-gradient(to bottom,#3a8cdf 0,#0053a6 100%);
	}
	
	.blues:active {
		border-color: #000 #002d59 #002d59;
		-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
		-ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
		-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
		box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
		filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#005ab4,EndColorStr=#175ea6);
		background-image: -moz-linear-gradient(top,#005ab4 0,#175ea6 100%);
		background-image: -ms-linear-gradient(top,#005ab4 0,#175ea6 100%);
		background-image: -o-linear-gradient(top,#005ab4 0,#175ea6 100%);
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#005ab4),color-stop(100%,#175ea6));
		background-image: -webkit-linear-gradient(top,#005ab4 0,#175ea6 100%);
		background-image: linear-gradient(to bottom,#005ab4 0,#175ea6 100%);
	}
</style>
</head>
<body>
	<div class="w">
		<h1>#03 Glossy Shadow Button</h1>
		<button class="blues">Hover Me!</button>
	</div>
</body>
</html>